import 'package:citiesocial/_include.dart';
import 'package:citiesocial/widgets/goods/horizonal_goods.dart';
import 'package:citiesocial/ui/goods/goods_by_theme.dart';

class ThemeGoods extends BaseStatefulWidget {
  final List<ThemeEntity> list;
  final hasTriangle;
  ThemeGoods(this.list, this.hasTriangle);
  @override
  State<StatefulWidget> createState() => _ThemeGoodsState();
}

class _ThemeGoodsState extends BaseState<ThemeGoods> {
  _ThemeGoodsState();
  int _index = 0;

  Widget _generateImage(url) {
    final image = Image(
      height: 180.0,
      fit: BoxFit.cover,
      image: CachedNetworkImageProvider('$url'),
    );
    return widget.hasTriangle
        ? Stack(
            alignment: Alignment.bottomCenter,
            fit: StackFit.expand,
            children: <Widget>[
              image,
              Align(
                child: Image.asset(
                  'imgs/white_triangle.png',
                  width: 33.3,
                  height: 20.0,
                  fit: BoxFit.scaleDown,
                ),
                alignment: Alignment.bottomCenter,
              )
            ],
          )
        : image;
  }

  void _pageChanged(int index) {
    setState(() {
      _index = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    Widget widget = Container(
      margin: EdgeInsets.only(top: 5.0),
      height: 180.0,
      child: PageView.builder(
        controller: PageController(viewportFraction: 0.9),
        onPageChanged: (index) => _pageChanged(index),
        itemCount: this.widget.list.length,
        itemBuilder: (_, index) => GestureDetector(
              onTap: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) =>
                            GoodsByTheme(this.widget.list[index].theme_id)));
              },
              child: Stack(
                alignment: Alignment.center,
                fit: StackFit.expand,
                overflow: Overflow.clip,
                children: <Widget>[
                  Container(
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(5.0),
                      child: _generateImage(
                          '${this.widget.list[index].theme_img}'),
                    ),
                    margin: EdgeInsets.symmetric(horizontal: 5.0),
                  ),
                  Center(
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text(
                          '${this.widget.list[index].theme_name}',
                          style: TextStyle(
                            fontSize: 20.0,
                            color: Colors.white,
                          ),
                        ),
                        Image.asset(
                          'imgs/js_cells_img_more_w.png',
                          height: 20.0,
                          width: 20.0,
                          fit: BoxFit.scaleDown,
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
      ),
    );
    if (this.widget.hasTriangle &&
        this.widget.list[_index].goods_list != null &&
        this.widget.list[_index].goods_list.length > 0) {
      widget = Column(
        children: <Widget>[
          widget,
          HorizonalGoods(this.widget.list[_index].goods_list)
        ],
      );
    }
    return widget;
  }
}
